<template>
	<view class="vipResult">
		<zhu-nav-bar title="办理结果" bgColor="#fff" leftColor="#000" sizeColor="#111"></zhu-nav-bar>
		<view class="vipResult-plate-1">
			<view class="content">
				<view class="left">
					<text>办理成功!</text>
					<text>绑定手机号登录即可查看会员</text>
				</view>
				<image src="../../../../../static/img/orderHome/result-vip-icon.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="vipResult-plate-2">
			<view class="title">
				会员信息
			</view>
			<view class="content">
				<text space="emsp">姓名：杨构</text>
				<text space="emsp">手机号：15188359797</text>
				<text space="emsp">宝宝乳名：屁桃</text>
				<text space="emsp">宝宝生日：2020-01-25</text>
			</view>
			<view class="title">
				会员卡信息
			</view>
			<view class="content">
				<text space="emsp">会员卡类型：畅玩800元年卡</text>
				<text space="emsp">会员卡售价：￥800</text>
				<text space="emsp">优惠金额：￥100</text>
				<text space="emsp">实收金额：￥750</text>
				<text space="emsp">收取方式：线下现金</text>
			</view>
		</view>
		<view class="btm-btn" @click="onBack">
			<text>返回</text>
		</view>
	</view>
</template>

<script>
	import zhuNavBar from '@/pages/components/zhuNavBar.vue'
	export default {
		data() {
			return {
				
			};
		},
		components:{
			zhuNavBar
		},
		methods:{
			onBack(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.vipResult{
	width: 100vw;
	min-height: 100vh;
	background-color: #f9f9f9;
	.vipResult-plate-1{
		padding-top: calc(88rpx + var(--status-bar-height));
		.content{
			width: 750rpx;
			height: 192rpx;
			background: linear-gradient(-36deg,#0d4eff 0%, #3c71ff 100%);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 71rpx 0 48rpx;
			.left{
				display: flex;
				flex-direction: column;
				text:first-child{
					font-size: 42rpx;
					font-weight: 700;
					color: #ffffff;
					margin-bottom: 19rpx;
				}
				text:last-child{
					font-size: 24rpx;
					font-weight: 500;
					color: #ffffff;
				}
			}
			image{
				width: 108rpx;
			}
		}
	}
	.vipResult-plate-2{
		background-color: #fff;
		padding: 40rpx;
		.title{
			font-size: 42rpx;
			font-weight: 800;
			color: #111111;
			margin-bottom: 30rpx;
		}
		.content{
			display: flex;
			flex-direction: column;
			margin-bottom: 50rpx;
			text{
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
				margin-bottom: 15rpx;
			}
		}
		.content:last-child{
			margin-bottom: 0;
		}
	}
	.btm-btn{
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: 500;
		text-decoration: underline;
		color: #999999;
	}
}
</style>
